<template>
  <a-form-item>
    <template #label>
      {{ labelName + '点值' }}
      <a-tooltip>
        <template #title>
          {{ tooltip[labelKey].value }}
        </template>
        <question-circle-outlined class="toolTip" />
      </a-tooltip>
    </template>
    <a-input-number
      class="inputStyle"
      :min="1"
      v-model:value="configItem.value"
    />
  </a-form-item>
  <a-form-item>
    <template #label>
      控制器值
      <a-tooltip>
        <template #title>
          {{ tooltip[labelKey].control }}
        </template>
        <question-circle-outlined class="toolTip" />
      </a-tooltip>
    </template>
    <a-input class="inputStyle" v-model:value="configItem.control" />
  </a-form-item>
  <a-form-item>
    <template #label>
      线性过渡
      <a-tooltip>
        <template #title>
          {{ tooltip[labelKey].timing }}
        </template>
        <question-circle-outlined class="toolTip" />
      </a-tooltip>
    </template>
    <a-input class="inputStyle" v-model:value="configItem.timing" />
  </a-form-item>
  <a-form-item>
    <template #label>
      动画时间
      <a-tooltip>
        <template #title>
          {{ tooltip[labelKey].duration }}
        </template>
        <question-circle-outlined class="toolTip" />
      </a-tooltip>
    </template>
    <a-input-number
      class="inputStyle"
      :step="500"
      :min="0"
      v-model:value="configItem.duration"
    />
  </a-form-item>
</template>
<script>
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
export default {
  props: ['labelName', 'configItem', 'labelKey'],
  data() {
    return {
      tooltip: {
        pitch: {
          value: '动画终点的俯仰角度(0~100)。示例值:100',
          control:
            '控制器，格式:x,y;...; x是0～1的起始区间，y是pitch值。示例值:0,20;0.5,50;1,100;',
          timing: 'x是0～1的起始区间，y是pitch值。示例值:0.3, 0, 1, 1',
          duration: '过渡时间，毫秒（ms)。示例值:7000',
        },
        zoom: {
          value: '动画终点的地图缩放等级。示例值:18',
          control:
            '控制器，格式:x,y;...; x是0～1的起始区间，y是pitch值。示例值:0.3,16;1,17;',
          timing: 'x是0～1的起始区间，y是pitch值。示例值:0.3, 0, 0.9, 1',
          duration: '过渡时间，毫秒（ms)。示例值:5000',
        },
        rotation: {
          value: '动画终点的地图旋转角度。示例值:-360',
          control:
            '控制器，格式:x,y;...; x是0～1的起始区间，y是pitch值。示例值:0.4,5.7;0.6,-360;',
          timing: 'x是0～1的起始区间，y是pitch值。示例值:0,0,0.7,1',
          duration: '过渡时间，毫秒（ms)。示例值:10000',
        },
      },
    };
  },
  components: {
    QuestionCircleOutlined,
  },
};
</script>
<style lan="less" scoped>
.inputStyle {
  width: 160px;
}
.toolTip {
  color: #e6a23c;
}
</style>
